<template>
  <div class="mation">
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div class="Information">
      <p><span>*</span>&#12288;考生信息</p>
    </div>
    <div class="UploadPictures">
      <!-- :max-count="2"  限制图片上传数量 -->
      <!-- :max-size="500 * 1024"  -->
   
      <van-uploader v-model="fileList" multiple :max-count="1" :max-size="295 * 413" />
        
      <p>上传证件照</p>
    </div>
    <div class="colored">
      <van-cell-group>
        <van-field
          v-model="value"
          label="真实姓名"
          placeholder="请输入真实姓名"
        />
      </van-cell-group>
      <div class="Radios">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
        <van-field
          v-model="tel"
          type="tel"
          label="身份证"
          placeholder="131025199909098765"
        />
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field
          v-model="tels"
          type="tel"
          label="出生年月"
          placeholder="1999-01-01"
        />
        <van-field
          v-model="fieldValuea"
          is-link
          readonly
          label="通讯地址"
          placeholder="河北省 廊坊市 广阳区"
          @click="show1 = true"
        />
        <van-popup v-model="show1" round position="bottom">
          <van-cascader
            title="请选择所在地区"
            :options="optionsa"
            @close="show1 = false"
            @finish="onFinisha"
          />
        </van-popup>
        <van-field
          v-model="telsm"
          type="tel"
          label="详细地址"
          placeholder="万达广场3-2-101"
        />

        <van-field label="收件人" placeholder="王同学">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-radio-group v-model="radio">
              <van-radio name="1">本人</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field
          v-model="telq"
          type="tel"
          label="联系手机"
          placeholder="18899996666"
        />
      </div>
    </div>
    <div class="xinxi">
      <div class="Xinxititle"><span>*</span>学籍信息</div>
      <van-field
        v-model="fieldValueb"
        is-link
        readonly
        label="考试地区"
        placeholder="河北省 廊坊市 广阳区111"
        @click="showq = true"
      />
              <van-popup v-model="showq" round position="bottom">
          <van-cascader
            title="请选择所在地区"
            :options="optionsaq"
            @close="showq = false"
            @finish="onFinishaq"
          />
        </van-popup>
      <!-- 输入考生号，调起手机号键盘 -->
      <van-field
        v-model="telqw"
        type="tel"
        label="考生号"
        placeholder="请输入考生号"
      />
      <van-field
        v-model="fieldValuec"
        is-link
        readonly
        label="政治面貌"
        placeholder="党员"
        @click="showc = true"
      />
    <van-popup v-model="showc" round position="bottom">
          <van-cascader
            title="请选择所在地区"
            :options="optionsac"
            @close="showq = false"
            @finish="onFinishac"
          />
        </van-popup>


      <van-field
        v-model="telsms"
        type="tel"
        label="毕业学校"
        placeholder="廊坊市第六中学"
      />
    <van-popup v-model="showq" round position="bottom">
          <van-cascader
            title="请选择所在地区"
            :options="optionsaq"
            @close="showq = false"
            @finish="onFinishaq"
          />
        </van-popup>
    </div>

    <div class="xinxi">

      <div class="Xinxititle"><span>*</span>学籍信息</div>

        <van-field v-model="telsmst" type="tel" label="家长姓名"  placeholder="王XX" />
      <van-cell title="关系" placeholder="王同学">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #title>
          <div class="gunxi">
            <span class="custom-title">关系</span>
            <van-radio-group v-model="radio" class="selectGunxi">
              <van-radio name="1" class="selectRadio">父亲</van-radio>
              <van-radio name="2" class="selectRadio">母亲</van-radio>
              <van-radio name="3" class="selectRadio">其他</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-cell>

      <van-field v-model="telsms" type="tel" label="职务" placeholder="无" />
      <van-field
        v-model="telsms"
        type="tel"
        label="工作单位"
        placeholder="无"
      />
      <van-field
        v-model="telsms"
        type="tel"
        label="手机号"
        placeholder="13888888888"
      />
    </div>
    <div class="EnterButton">
      <van-button type="info">确定</van-button>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/navBar.vue";
import{Toast} from 'vant'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 标题  路由
      title: "完善信息",
      route: "/MyHome",
      // 上传图片
      fileList: [
         
      ],
      //真实姓名
      value: "",

      show: false,
      show1: false,
      showq:false,
      showc:false,
      //身份证
      fieldValue: "",
      //通讯地址
      fieldValuea:"",

      fieldValueb:"",
      //考试地区
      fieldValuec:"",
      //政治面貌
      cascaderValue: "",
      //家长姓名
      telsmst:"",
      //身份证
      tel: "",
      // 出生年月
      tels: "",
      // 详细地址
      telsm: "",
      //单选框
      radio: "1",
      telq: "",
      //  考生号
      telqw: "",
      // 毕业学校
      telsms: "",
      
      //地区
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }]
        }
      ],
      //通讯地址
      optionsa: [
        {
          text: "新疆省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }]
        }
      ],
      //考试地区
    optionsaq: [
        {
          text: "新疆省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }]
        }
      ],
    //政治庙貌
    optionsac: [
        {
          text: "新疆省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }]
        }
      ],
    
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    //地区
    onFinish({ selectedOptions }) {
      console.log(selectedOptions);
      this.show = false;
      this.fieldValue = selectedOptions.map(option => option.text).join("/");
      // this.fieldValuea = selectedOptions.map(option => option.text).join("/");
    },
    //通讯地址
    onFinisha({ selectedOptions }) {
      this.show1 = false;
    this.fieldValuea = selectedOptions.map(optionsa => optionsa.text).join("/");
    },
     //考试地区
    onFinishaq({ selectedOptions }) {
      this.showq = false;
    this.fieldValueb = selectedOptions.map(optionsa => optionsa.text).join("/");
    },
    //政治庙貌
    onFinishac({ selectedOptions }) {
      this.showc = false;
    this.fieldValuec = selectedOptions.map(optionsa => optionsa.text).join("/");
    },
    afterRead(file) {
      console.log(file);

      file.status = 'success';
      file.message = '上传成功...';
      setTimeout(() => {
        file.status = 'failed';
        file.message = '上传失败';
      }, 1000);
      // if(file.message===''){
      //   Toast.success('上传成功')
      // }else{
      //   Toast.success('上传失败')

      // }
    },
  }


};
</script>

<style scoped>
.gunxi {
  display: flex;
  align-items: center;
}
.selectGunxi {
  display: flex;
  align-items: center;
  margin-left: 65px;
}
.selectRadio {
  margin-left: 10px;
  text-align: center;
}
.mation {
  /* height: 100%; */
  background-color: #f5f5f5;
}
.Information {
  margin-left: 25px;
}
.Information p {
  color: rgba(80, 80, 80, 1);
  font-size: 14px;
}
.Information p span {
  color: rgba(255, 0, 0, 1);
  font-size: 14px;
}
.UploadPictures {
  text-align: center;
  margin-top: 40px;
  height: 140px;
}
.UploadPictures p {
  color: rgba(80, 80, 80, 1);
  font-size: 14px;
}
/* .Radios{
  margin-left: 15px;
  font-size: 14px;
} */
.colored {
  background-color: rgba(255, 255, 255, 1);
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.xinxi{
  margin-top: 10px;
}
.Xinxititle {
  color: rgba(80, 80, 80, 1);
  font-size: 14px;
  line-height: 150%;
  /* margin-left: 25px; */
  /* margin-top: 5px; */
  margin: 10px 0 10px 25px;
}
.Xinxititle span {
  color: red;
}
.van-field {
  border-bottom: 1px solid #f0f0f0;
}
.EnterButton{
  text-align: center;
}
.van-button{
  width: 345px;
  margin-top: 62px;
  margin-bottom: 20px;
}
</style>
